<template>
  <!-- 左侧菜单栏 -->
  <div class="nav-menu-group">
    <div class="home-menu-list">
      <template v-for="(item, index) in topList" >
        <div 
          class="home-menu-item" 
          :class="{'home-menu-item-active': activeItem.id === item.id}" 
          :key="'list_' + index"
          @click="menuClick(item)">
          <div>{{item.menuName}}</div>
        </div>
      </template>

      <!-- 横线 -->
      <div class="menu-divider"/>

      <!-- 菜单 -->
      <draggable v-model="list" :disabled="!(draggable && isEdit)" @end="onEnd(list)" draggable=".home-menu-item" handle=".draggable-box" animation="250">
        <template v-for="(item, index) in list" >
          <div 
            class="home-menu-item" 
            :class="{'home-menu-item-active': activeItem.id === item.id}" 
            :key="'list_' + index"
            @click="menuClick(item)">
            <div>{{item.menuName}}</div>
            <div class="home-menu-icon-group" v-if="draggable && isEdit && item.id != '100' && item.id != '101'" @click.stop="">
              <i class="home-menu-icon el-icon-edit" @click="editMenu(item)"></i>
              <i class="home-menu-icon el-icon-delete" @click="deleteMenu(item)"></i>
              <div class="home-menu-icon draggable-box">
                <svg-icon icon-class="draggable" class="draggable-icon"/>
              </div>
            </div>
          </div>
        </template>
      </draggable>

      <!-- 添加菜单 -->
      <div class="add-menu" v-if="draggable && isEdit" @click="addmenu">
        <i class="el-icon-plus avatar-uploader-icon"/>
      </div>
    </div>

    <index-footer/>

    <!-- 添加、编辑 菜单 -->
    <add-menu 
      :show="showMenuEdit" 
      :editType="editType"
      :item="showMenuItem"
      editContentType="0"
      @close="showMenuEdit = false" 
      @addNewMenu="addNewMenu"/>
  </div>
</template>

<script>
import LocalStorage from "@/utils/localStorage.js"
import Avatar from '@/components/Avatar.vue'
import AddMenu from '@/components/AddMenu.vue'
import IndexFooter from '@/components/IndexFooter.vue'
import Api from "@/utils/api.js"

export default {
  props: ["topList", "itemList", "src", "size", 'select', 'isEdit'],

  components:{
    Avatar,
    AddMenu,
    IndexFooter
  },

  computed:{
    draggable(){
      var userInfo = LocalStorage.getItem("USER_INFO")
      return userInfo != null  && userInfo.userId != null;
    },
  },

	watch: {
    itemList: {
      immediate: true,
      handler(val) {
        this.list = val;
      }
    },
  },

  data(){
    return{
      // 菜单编辑
      showMenuEdit: false,
      showMenuItem: '',
      editType:0,
      activeItem: '',
      list:[]
    }
  },

  mounted() {
    this.$nextTick(() => {
      // 读取缓存的选中菜单
      var localActiveItem = LocalStorage.getItem("USER_HOME_ACTIVE_ITEM")
      this.activeItem = this.list[0]
      if(localActiveItem && localActiveItem.id){
        this.topList.forEach( item => {
          if(item.id == localActiveItem.id){
            this.activeItem = localActiveItem
          }
        })
        this.list.forEach( item => {
          if(item.id == localActiveItem.id){
            this.activeItem = localActiveItem
          }
        })
      }

      this.menuClick(this.activeItem)
    })
  },

  methods:{
    addNewMenu(item){
      this.$emit('addNewMenu', item)
    },

    router(path){
      this.$router.push('/'+path)
    },

    routerNewWindow(path){
      window.open(path, '_blank')
    },

    menuClick(item){
      this.activeItem = item
      this.$emit('menuClick', item)
    },

    deleteMenu(item){
      this.$emit('deleteMenu', item)
    },

    addmenu(){
      this.editType = 0
      this.showMenuItem = ''
      this.showMenuEdit = true
    },

    editMenu(item){
      this.editType = 1
      this.showMenuItem = item
      this.showMenuEdit = true
    },

    // 更新拖拽后的菜单组顺序
    onEnd(groupList) {
      var list = []
      groupList.forEach((item,index) => {
        item.orderNum = index
        list.push({
          id: item.id,
          menuName: item.menuName,
          menuUrl: item.menuUrl,
          menuInfo: item.menuInfo,
          parentMenuId: item.parentMenuId,
          orderNum: item.orderNum,
        })
      })

      this.$axios.post(Api.USER_MENU_LIST_EDIT, list).catch(res =>{
        this.$message.warning(res.message);
      })
    },    

    // 退出登录
    logout(){
      this.$confirm('是否确定退出登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {          
          //  清楚用户信息
          LocalStorage.clear()
          this.$message({type: 'success',message: '已退出登录!'});
          location.reload()
        }).catch(() => {});
    }
  }
}
</script>

<style lang="css">
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}
</style>

<style lang="less">
@import '@/assets/css/index.less';

.nav-menu-group{
  width: 100%;

  .home-menu-list{
    height: calc( 100vh - 110px );
    overflow-y: auto;

    .menu-divider{
      display: flex;
      align-items: center;
      margin: 5px 20px;
      height: 1px;
      background-color: #000;
      opacity: .04;
    }

    &:hover{
      .add-menu{
        display: block;
      }
    }
  }

  .home-menu-item{
    height: 40px;
    padding-left: 20px;
    .flex-center-start();
    font-size: 14px;
    color: #455166;
    transition: all 0.13s;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;

    &:hover{
      color: #333333;
      background-color:#edf0f5;

      .home-menu-icon-group{
        display: flex;
      }
    }
  }

  .home-menu-item-active{
    color: #303133;
    background-color: #e3e8f0;
    box-shadow: inset 3px 0 0 0 #3386ff;

    &:hover, &:active{
      color: #303133;
      background-color: #e3e8f0;
    }
  }

  // 删除、编辑按钮
  .home-menu-icon-group{
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    .flex-center-end();
    display: none;

    .home-menu-icon{
      color: #999999;
      padding: 5px;
      font-size: 12px;
      
      &:hover{
        color: #409EFF;
      }
    }

    .draggable-box{
      cursor: move;
      &:hover{
        color: #409EFF;
      }

      .draggable-icon{
        font-size: 14px;
        color: #999;
      }
    }
  }

  // 添加菜单
  .add-menu{
    display: none;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px;
    text-align: center;
    padding: 8px 0;
    margin-bottom: 50px;

    &:focus, &:hover {
      color: #409eff;
      border-color: #409eff;
    }
  }
}
</style>
